<template>
  <div class="hello">
    <div id="myChart"></div>
    <el-button @click="openFullScreen2">
      loading
    </el-button>
    <el-button @click="toForm">
      toForm
    </el-button>
    <el-button @click="getMsg">
      get
    </el-button>
    <div class="block">
      <span class="demonstration">分页控件---完整功能</span>
      <br>
      pageSize:{{pageSize}} pageNumber:{{pageNumber}}
      <el-pagination @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="pageNumber"
                     :page-sizes="pageSizeList"
                     :page-size="pageSize"
                     :layout="layout" :total="totalNumber">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import http from 'axios'

  export default {
    name: 'HelloWorld',
    data() {
      return {
        msg: 'Welcome to Your Vue.js App',
        totalNumber: 4000,
        pageNumber: 1,
        pageSize: 100,
        pageSizeList: [100, 200, 300, 400, 500, 1000],
        layout: 'total, sizes, prev, pager, next,jumper'
      }
    },
    mounted() {
      this.drawLine();
    },
    methods: {
      handleSizeChange(val) {
        this.pageSize = val;
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        this.pageNumber = val;
        console.log(`当前页: ${val}`);
      },
      openFullScreen2() {
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        setTimeout(() => {
          loading.close();
        }, 10000);
      },
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      drawLine() {
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('myChart'));
        // 绘制图表
        myChart.setOption({
          title: {text: '在Vue中使用echarts'},
          tooltip: {},
          xAxis: {
            data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
          },
          yAxis: {},
          series: [{
            name: '销量',
            type: 'bar',
            data: [155, 20, 36, 10, 10, 20]
          }]
        });
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  #myChart {
    width: 400px;
    height: 300px
  }

  span {
    white-space: pre-wrap;
    overflow: hidden;
  }

  .hello .block {
    padding: 10px;
  }

  @import url("//unpkg.com/element-ui@2.4.3/lib/theme-chalk/index.css");
</style>
